<template>
  <div class="list-panel flex flex-flow flex-justify-space-between" :style="{width: listDatas.width+'px', height: listDatas.height+'px'}">
      <template v-if="reverse==='true'">
        <div class="h-line-reverse" :style="{width: hLineWidth, right: hLineRight}"></div>
        <div class="v-line-reverse" :style="{height: vLineHeight,  top: hLineTop}"></div>
      </template>
      <template v-else>
        <div class="h-line" :style="{width: hLineWidth, left: hLineLeft}"></div>
        <div class="v-line" :style="{height: vLineHeight,  top: hLineTop}"></div>
      </template>
      <div :class="[ reverse==='true'? 'list-panel-title-reverse': 'list-panel-title']">{{panelTitle}}</div>
      <div v-for="(item, index) in listDatas.datas" class="panel-item" :key="index" @click="itemClick(item)">
        <div class="panel-bg"  v-lazy:background-image="listDatas.imageSrc" :style="{'background-position': (-item.hPos)+'px '+(-item.vPos)+'px'}">
        </div>
        <slot :item="item">
          give you color see
        </slot >
      </div>
  </div>
</template>

<script>

export default {
  props: {
    hLineWidth: '',
    vLineHeight: '',
    hLineLeft: '',
    hLineRight: '',
    hLineTop: '',
    panelTitle: '',
    reverse: false,
    listDatas: {}
  },
  mounted () {
  },
  data () {
    return {

    }
  },

  methods: {
    itemClick (item) {
      this.$emit('itemclick', item)
    }
  }
}
</script>

<style scoped>
  .list-panel {
    margin-top: 30px;
    position: relative;
    padding-right: 15px;
  }
  .h-line {
    position: absolute;
    height: 1px;
    border-top: 1px solid rgba(255,255,255,1);
  }
  .v-line {
    position: absolute;
    width: 1px;
    border-left: 1px solid rgba(255,255,255,1);
  }
  .h-line-reverse {
    position: absolute;
    height: 1px;
    border-top: 1px solid rgba(255,255,255,1);
  }
  .v-line-reverse {
    position: absolute;
    width: 1px;
    right: 0px;
    border-right: 1px solid rgba(255,255,255,1);
  }
  .list-panel-title {
    position: absolute;
    font-size: 20px;
    top: -30px;
    left: 15px;
  }
  .list-panel-title-reverse {
    position: absolute;
    font-size: 20px;
    top: -30px;
    right: 15px;
  }
  .panel-item {
    margin-left: 15px;
    margin-top: 15px;
    color:darkgrey;
    cursor: pointer;
  }
  .panel-bg {
    width: 200px;
    height: 130px;
  }
</style>
